<template>
	<div class="main">
		<navTop></navTop>
		<div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/examindex' }">考试管理</el-breadcrumb-item>
			  <el-breadcrumb-item :to="{ path: '/examoverview' }">考试概览</el-breadcrumb-item>
			  <el-breadcrumb-item>评阅进度</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="contentMain">
			<div class="searchlist">
				 <router-link to="/taskallocation" active-class="hover">任务分配</router-link>
				 <router-link to="/reviewprogress" active-class="hover">评阅进度</router-link>
				 <router-link to="/monitoringoverview" active-class="hover">监控概览</router-link>
				 <router-link to="/exceptionhandling" active-class="hover">异常处理</router-link>
				 <router-link to="/arbitrationprocessing" active-class="hover">仲裁处理</router-link>
			</div>
			<div class="progressBox">
				<div class="progressBoxLeft">
					<span>评阅状态：</span>
					<el-select v-model="markstatus" placeholder="请选择" @change="markchange">
					    <el-option
					      v-for="item in markinglist"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					</el-select>
					<!-- <el-progress :percentage="50" :stroke-width="10"></el-progress> -->
					<!-- <b><i>{{reviewedSum}}</i>/{{exitStudent.totalTask}}</b> -->
					<!-- <p>在线人数：<b><i>100</i>/1000</b></p> -->
				</div>
				<div class="progressBoxRight">
					<em>下载进度</em>
					<em>刷新进度</em>
					<em @click="reappraisaltab">重评</em>
				</div>
			</div>
			<div class="allocationContentRight">
				<div class="allocationAttentionRight">
					<div class="aartop">
						<span>评阅任务总量：<i>{{ totalSum }}</i></span>
						<!-- <span>仲裁总量：<i>5</i></span> -->
						<span>已评阅：<i>{{reviewedSum}}</i></span>
						<!-- <span>已仲裁：<i>5</i></span> -->
						<!-- <span>已分配：<i>5</i></span> -->
						<span>未评阅：<i>{{pendingSum}}</i></span>
						<!-- <span>未仲裁：<i>5</i></span> -->
						<!-- <span>未分配：<i>{{totalSum}}</i></span> -->
					</div>
				</div>
				<div class="tableStyle">
					<table cellspacing="0" cellpadding="0" style="width:100%">
						<tr>
							<th>题组</th>
							<th>评阅总量</th>
							<th>已评</th>
							<th>未评</th>
							<th>异常试卷</th>
							<th>评阅进度</th>
							<th>评阅教师</th>
							<th>手机号&账号</th>
							<th>状态</th>
						</tr>
						<tr v-for="item in reviewprogress">
							<td>{{item.questionNumber}}</td>
							<td>{{item.totalReviewCount}}</td>
							<td>{{item.reviewedCount}}</td>
							<td>{{item.pendingReviewCount}}</td>
							<td>{{item.abnormalPaperCount}}</td>
							<td v-if="item.reviewedCount!=0&&item.totalReviewCount!=0">{{((item.reviewedCount/item.totalReviewCount)*100).toFixed(2)}}%</td>
							<td v-else>0%</td> 
							<td>{{item.reviewer}}</td>
							<td>{{item.account}}</td>
							<td><span class="online">{{item.isOnline?'在线':'不在线'}}</span></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<!-- 重新评阅 -->
		<div class="addExamMain" v-if="reappraisalIshow">
			<div class="addExamContent">
				<h3>重新评阅</h3>
				<div class="reappraisalcontent">
					<p style="color:#EC555A;font-size:14px;padding-bottom:24px;">开启重评后，指定范围的阅卷数据、记录、异常及相应统计会被清空！</p>
					<ul>
						<li>
							<span style="width:110px;">选择重评范围：</span>
							<div class="inputBox">
								<el-select v-model="exitStudent.xb" multiple placeholder="请选择">
								  <el-option
									v-for="item in gradelist"
									:key="item.id"
									:label="item.name"
									:value="item.id">
								  </el-option>
								</el-select>
							</div>
						</li>
						<li>
							<span style="width:110px;">选择重评题组：</span>
							<div class="inputBox">
								<el-select v-model="exitStudent.xb" multiple placeholder="请选择">
								  <el-option
									v-for="item in gradelist"
									:key="item.id"
									:label="item.name"
									:value="item.id">
								  </el-option>
								</el-select>
							</div>
						</li>
						<li>
							<span style="width:110px;">取消授权密码：</span>
							<div class="inputBox">
								<el-input v-model="exitStudent.examnumber" placeholder="请输入内容" @input="handleInput"></el-input>
							</div>
						</li>
					</ul>
					<div class="groupbutton">
						<el-button type="primary" @click="reappraisalrsure">确认重评(30s)</el-button>
						<el-button type="primary" @click="reappraisalgoback">返回</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	import {get,put,post,del} from '../../request/api.js'
	export default{
		data(){
			return{
				reappraisalIshow:false,
				exitStudent:{},
				reviewprogress:[],
				markinglist:[
					{
						name:'未开始',
						id:1
					},
					{
						name:'进行中',
						id:2
					},
					{
						name:'暂停',
						id:3
					},
					{
						name:'完成',
						id:4
					}
				],
				markstatus:''
			}
		},
		mounted() {
			this.examInfo = JSON.parse(sessionStorage.getItem('examInfo'))
			this.markstatus =this.examInfo.markHubStatus
			this.readviewlist()
			this.jdprogress()
		},
		methods:{
			jdprogress(){
				let obj={
					examCourseId:this.examInfo.id
				}
				get('/monitor/getstatus',obj)
				.then(res=>{
					this.markstatus = res.data
				})
			},
			markchange(val){
				let obj={
					examCourseId:this.examInfo.id,
					status:val
				}
				get('/monitor/update',obj)
				.then(res=>{
					
				})
				.catch(error=>{
					
				})
			},
			reappraisaltab(){
				this.reappraisalIshow = true
			},
			reappraisalrsure(){
				this.reappraisalIshow = false
			},
			reappraisalgoback(){
				this.reappraisalIshow = false
			},
			readviewlist(){
				let obj={
					examCourseId:this.examInfo.id
				}
				get('/monitor/progress',obj)
				.then(res=>{
					if(res.code==200){
						this.reviewprogress = res.data.progresss
						this.exitStudent = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
			}
		},
		components:{navTop},
		computed: {
			totalSum() {
				return this.reviewprogress.reduce((sum, item) => sum + item.totalReviewCount, 0);
			},
			// 如果也需要其他字段的总和
			reviewedSum() {
				return this.reviewprogress.reduce((sum, item) => sum + item.reviewedCount, 0);
			},
			pendingSum() {
				return this.reviewprogress.reduce((sum, item) => sum + item.pendingReviewCount, 0);
			}
		}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:20px;
	}
	.breadBox{
		height:32px;
		background: #Fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.progressBox >>> .el-breadcrumb__inner a, .progressBox >>> .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.progressBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		margin-top:14px;
		padding:0 24px;
	}
	.progressBoxLeft{
		display: flex;
		align-items: center;
		font-size:14px;
		color:#557292
	}
	.progressBoxLeft >>> .el-input__inner{
		width: 188px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.progressBox >>> .el-progress{
		width:224px;
		margin-left:14px;
	}
	.progressBox >>> .el-progress__text{
		font-size:14px !important;
	}
	.progressBoxLeft >>>  .el-input__icon{
		line-height:34px;
	}
	.progressBoxLeft b{
		font-size:12px;
		color:#5B6371;
	}
	.progressBoxLeft b i{
		font-size:14px;
		font-style:normal;
	}
	.progressBoxLeft p{
		margin-left:14px;
	}
	.allocationContentRight{
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		margin-top:24px;
	}
	.allocationAttentionRight{
		box-sizing: border-box;
		height: 54px;
		background: #E8F0FA;
		border-radius: 10px 10px 0px 0px;
		font-size:14px;
		line-height:54px;
		padding:0 14px;
	}
	.aartop{
		color:#557292;
	}
	.aartop span{
		margin-right:14px;
	}
	.aartop i{
		font-style: normal;
		color: #295CFF;
	}
	.tableStyle{
		background:#fff;
		padding:14px;
		height:calc(100vh - 360px);
		overflow-y: auto;
		overflow-x: hidden;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar {
		 width:4px;
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.tableStyle table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableStyle table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableStyle table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableStyle table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableStyle table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableStyle table tr td:last-child{
		border-right:none;
	}
	.tableStyle table tr td span.online{
		display: inline-block;
		color:#288F41;
		width: 48px;
		height: 22px;
		background: rgba(40,143,65,0.06);
		border-radius: 6px;
		border: 1px solid rgba(40,143,65,0.5);
	}
	.tableStyle table tr:nth-child(3n){
		background:#FAFAFB
	}
	.tableStyle table tr td >>> .el-input__inner{
		width: 100px;
		height: 30px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.tableStyle table tr td >>> .el-input__icon{
		line-height:30px;
	}
	.progressBoxRight{
		display: flex;
		align-items: center;
	}
	.progressBoxRight em{
		display: inline-block;
		width: 104px;
		height: 34px;
		border-radius: 10px;
		font-size:14px;
		text-align: center;
		line-height: 34px;
		margin-left:14px;
		cursor: pointer;
	}
	.progressBoxRight em:nth-child(1){
		background: #295CFF;
		color:#fff;
	}
	.progressBoxRight em:nth-child(2){
		background: #F2F6FB;
		border: 1px solid #295CFF;
		color:#295CFF;
	}
	.progressBoxRight em:nth-child(3){
		width:76px;
		background: #EC555A;
		color:#fff;
	}
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 600px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
		justify-content: center;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:80px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>>.el-input__icon{
		line-height:34px;
	}
	.inputBox{
		width: 150px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:27px;
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#295CFF;
		padding:0 4px;
	}
	.addExamContent >>> .el-upload-dragger{
		width:522px;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>